<template>
  <div class="personmassage">
    <!-- 头部 -->


      <div class="head"> <img
          src="https://img.axureshop.com/ee/00/de/ee00de2201bf478bb4a9d4f881afd706/images/考勤签到/u746.png"
          @click="returnPage" />
        <span
          style="font-size: 20px;font-family: '微软雅黑 Regular';font-weight: bold; margin-left: 5px;margin-right: 190px;">{{ title }}</span>
      </div>
      <!-- 列表 -->
      <div class="list">
        <van-cell title="头像" is-link>
          <template #value>
            <img src="../mypage-img/face.png" alt="二维码" style="width: 23%; margin-left: 30vw; margin-top: -0.51vh" />
          </template>
        </van-cell>
        <van-cell title="姓名" is-link :value="name" />
        <van-cell title="用户手机号" is-link value="189****5656" />

        <van-cell title="二维码名片" is-link>
          <template #value>
            <img src="../mypage-img/u5275.png" alt="二维码" style="width: 15%; margin-left: 37vw" class="image"
              @click="show = true" />
            <van-overlay :show="show" @click="show = false">
              <div class="wrapper" @click.stop>
                <div class="block">
                  <a href="">hhh</a>
                  <a href="">bbb</a>
                </div>
              </div>
            </van-overlay>
          </template>
        </van-cell>
        <br />
        <van-cell title="用户所在学校" value="千峰大学" />
      </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref } from "vue";
import adminStore from "@/store/admin"
const myadminStore=adminStore()
// 设置页面标题
const title = "个人信息";
const name=myadminStore.userInfo.name
const router = useRouter();
console.log(myadminStore.userInfo);
const returnPage = () => {
  router.replace('/my');
};
const show = ref(false);
</script>

<style lang="scss" scoped>
/* 样式定义 */
.personmassage {
  width: 100vw;
  height: 100vh;

  // background-color: rgb(212, 225, 225);
  .head {
    display: flex;
    height: 40px;
    align-items: center;
    margin-top: 10px;
    padding-left: 5px;
    margin-bottom: 0px;
  }

  .list {
    width: 100vw;
    height: 100vh;
    position: absolute;
    background-color: rgb(228, 226, 223);
    margin-top: 3vh;

    .van-cell.van-cell--clickable {
      width: 100vw;
      height: 8vh;
      // margin-left: 8vw;
      font-size: 1.9vh;
      font-weight: 700;
      color: rgb(78, 78, 78);
    }

    .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;

    }

    .block {
      width: 120px;
      height: 120px;
      background-color: #fff;


    }
  }
}
</style>
